<template>
  <div class="gray-publish">
    <div class="content">
      <FlexBox justify="space-between">
        <h3 class="title">灰度名单</h3>
        <el-button @click="handleOpenDialog({data: {}, mode: 'add'})">添加</el-button>
      </FlexBox>

      <!-- 灰度名单列表 -->
      <div class="gray-table">
        <el-table
            :data="grayList"
            border
            style="width: 100%">
          <el-table-column
              prop="id"
              label="ID"
              width="200">
          </el-table-column>
          <el-table-column
              prop="openid"
              label="openId"
              width="200">
          </el-table-column>
          <el-table-column
              prop="name"
              label="商户">
          </el-table-column>
          <el-table-column
              prop="grayType"
              label="灰度方式">
          </el-table-column>
          <el-table-column
              prop="version"
              label="特性版本">
            <template slot-scope="scope">
              <span>{{scope.row.version ? scope.row.version : '--'}}</span>
            </template>
          </el-table-column>
          <el-table-column
              label="灰度功能">
            <template slot-scope="scope">
              <span v-if="scope.row.functions.length === 0">--</span>
              <span v-else class="tag"
                    v-for="(item, index) in scope.row.functions" :key="index">{{item}}</span>
            </template>
          </el-table-column>
          <el-table-column
              label="操作" width="200px">
            <template slot-scope="scope">
              <el-button size="small" @click="handleOpenDialog({data: scope.row, mode: 'edit'})">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 添加灰度的弹窗 -->
    <el-dialog :title="`${editMode ? '编辑' : '添加'}灰度名单`" :visible.sync="dialogFormVisible">
      <div class="dialog-content">
        <el-form :model="formData">
          <el-form-item label="openId" label-width="100px">
            <el-input v-model="formData.id" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="商户名称" label-width="100px">
            <el-input v-model="formData.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="灰度内容" label-width="100px">
            <el-select v-model="formData.grayType" placeholder="选择灰度方式">
              <template v-for="(item, index) in grayType">
                <el-option :label="item" :value="item" :key="index"></el-option>
              </template>
            </el-select>

            <el-select v-model="formData.functions" collapse-tags multiple placeholder="请选择" style="margin-left: 20px">
              <el-option
                  v-for="item in getGrayOptions"
                  :key="item"
                  :label="item"
                  :value="item">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align: right">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleSaveBtn">{{editMode ? "保 存" : "添 加"}}</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import FlexBox from "@components/flex-box/index";
import GrayService from "@/services/GrayService";
import AppConfig from "@/config/AppConfig";

export default {
  name: "GrayPublish",
  components: {FlexBox},
  data() {
    return {
      dialogFormVisible: false,
      form: {
        id: '',
        name: '',
        grayType: '',
        options: []
      },
      grayType: ['版本', '功能'],
      grayVersion: [
        '1.0.0',
        '1.0.1',
        '1.0.2',
        '1.0.3',
      ],
      grayFunction: ['分享', '赠送'],
      grayList: [],
      editMode: false,
      editObj: {}
    }
  },
  created() {
    if (AppConfig.env === 'mock') {
      this.$message.warning("mock环境不支持编辑操作");
    }
  },

  mounted() {
    this.getGrayList();
  },
  computed: {
    getGrayOptions() {
      switch (this.formData.grayType) {
        case "版本":
          this.formData.functions = [];
          return this.grayVersion;
        case "功能":
          this.formData.functions = [];
          return this.grayFunction;
        default:
          return [];
      }
    },
    formData() {
      return this.editMode ? this.editObj : this.form;
    }
  },
  methods: {
    handleOpenDialog(obj) {
      this.dialogFormVisible = true;
      if (obj.mode === 'edit') {
        this.editMode = true;
        this.editObj = JSON.parse(JSON.stringify(obj.data));
      }else {
        this.editMode = false;
        let  obj = {}
        for (const key in this.editObj) {
          obj[key] = key instanceof Array ? [] : null;
        }
        this.editObj = obj;
      }
    },

    getGrayList() {
      GrayService.getGrayList().then(res => {
        this.grayList = res;
      });
    },

    addGray() {
      let data = Object.assign({}, this.formData);
      data.functions = data.functions.join(";");
      GrayService.addGray(data).then(res => {
        this.grayList = res;
        this.dialogFormVisible = false;
        this.$message.success("添加成功");
      }).catch(err => {
        this.$message.error("添加失败");
      });
    },

    handleSaveBtn() {
      if (this.editMode) {
        console.log("编辑功能待完善");
      }else {
        this.addGray();
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.gray-publish {
  padding: 40px;

  .title {
    line-height: 2;
  }

  .content {
    .gray-table {
      margin-top: 20px;

      .tag {
        margin-right: 10px;
        padding: 8px;
        border-radius: 50%;
        background-color: rgb(0, 255, 0, .1);
      }
    }
  }

  .dialog-content {
    padding: 20px 40px;
  }
}
</style>
